<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">

<head th:replace="/common/include :: header(~{::title}, ~{::link}, ~{::style})">
    <title>DEMO-表单-自动补全</title>
</head>
<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-sm-6">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>搜索自动补全
                        <small>https://github.com/lzwme/bootstrap-suggest-plugin</small>
                    </h5>
                </div>
                <div class="ibox-content">
                    <p>展示下拉菜单按钮。</p>
                    <div class="row">
                        <div class="col-lg-6">
                            <div class="input-group">
                                <input type="text" class="form-control" id="suggest-demo-1">
                                <div class="input-group-btn">
                                    <button type="button" class="btn btn-white dropdown-toggle" data-toggle="dropdown">
                                        <span class="caret"></span>
                                    </button>
                                    <ul class="dropdown-menu dropdown-menu-right" role="menu">
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>

                    <p>不展示下拉菜单按钮。</p>
                    <div class="row">
                        <div class="col-lg-6">
                            <div class="input-group">
                                <input type="text" class="form-control" id="suggest-demo-2">
                                <div class="input-group-btn">
                                    <button type="button" class="btn btn-white dropdown-toggle" data-toggle="dropdown">
                                        <span class="caret"></span>
                                    </button>
                                    <ul class="dropdown-menu dropdown-menu-right" role="menu">
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>

                    <p>前端json中获取数据</p>
                    <div class="row">
                        <div class="col-lg-6">
                            <div class="input-group">
                                <input type="text" class="form-control" id="suggest-demo-3">
                                <div class="input-group-btn">
                                    <button type="button" class="btn btn-white dropdown-toggle" data-toggle="dropdown">
                                        <span class="caret"></span>
                                    </button>
                                    <ul class="dropdown-menu dropdown-menu-right" role="menu">
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>

                    <h3>百度搜索</h3>
                    <p>支持逗号分隔多关键字</p>
                    <div class="row">
                        <div class="col-lg-6">
                            <div class="input-group">
                                <input type="text" class="form-control" id="baidu">
                                <div class="input-group-btn">
                                    <button type="button" class="btn btn-white dropdown-toggle" data-toggle="dropdown">
                                        <span class="caret"></span>
                                    </button>
                                    <ul class="dropdown-menu dropdown-menu-right" role="menu">
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>

                    <h3>淘宝搜索</h3>
                    <p>支持逗号分隔多关键字</p>
                    <div class="row">
                        <div class="col-lg-6">
                            <div class="input-group">
                                <input type="text" class="form-control" id="taobao">
                                <div class="input-group-btn">
                                    <button type="button" class="btn btn-white dropdown-toggle" data-toggle="dropdown">
                                        <span class="caret"></span>
                                    </button>
                                    <ul class="dropdown-menu dropdown-menu-right" role="menu">
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                    <hr>
                    <div class="form-group">
                        <label class="font-noraml">相关参数详细信息</label>
                        <div><a href="http://doc.ruoyi.vip/#/standard/zjwd?id=bootstrap-suggest" target="_blank">http://doc.ruoyi.vip/#/standard/zjwd?id=bootstrap-suggest</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-sm-6">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>搜索自动补全
                        <small>https://github.com/bassjobsen/Bootstrap-3-Typeahead</small>
                    </h5>
                </div>
                <div class="ibox-content">
                    <p>通过数据属性的基本示例。</p>
                    <div class="row">
                        <div class="col-lg-6">
                            <input type="text" placeholder="piece..." data-provide="typeahead"
                                   data-source='["piece 1","piece 2","piece 3"]' class="form-control"/>
                        </div>
                    </div>
                    <hr>

                    <p>通过javascript的基本示例。</p>
                    <div class="row">
                        <div class="col-lg-6">
                            <input type="text" placeholder="piece..." class="form-control" id="typeahead-demo-1"/>
                        </div>
                    </div>

                    <hr>
                    <p>通过javascript的复杂示例。</p>
                    <div class="row">
                        <div class="col-lg-6">
                            <input type="text" placeholder="Afghanistan..." class="form-control" id="typeahead-demo-2"/>
                        </div>
                    </div>

                    <hr>
                    <p>后台url中获取简单数据</p>
                    <div class="row">
                        <div class="col-lg-6">
                            <input type="text" placeholder="piece..." class="form-control" id="typeahead-demo-3"/>
                        </div>
                    </div>

                    <hr>
                    <div class="form-group">
                        <label class="font-noraml">相关参数详细信息</label>
                        <div><a href="http://doc.ruoyi.vip/#/standard/zjwd?id=bootstrap-typeahead" target="_blank">http://doc.ruoyi.vip/#/standard/zjwd?id=bootstrap-typeahead</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div th:replace="/common/include :: footer"></div>
<div th:replace="/common/include :: suggestJs"></div>
<div th:replace="/common/include :: typeaheadJs"></div>
<script type="text/javascript">

    $(function() {
        $('#suggest-demo-1').bsSuggest({
            url: ctx + 'public/demo/autocomplete/user',
            idField: 'userId',
            keyField: 'loginName',
            processData: function (response) {
                var i, len, data = {
                    value: []
                };
                if (!response || !response.param || response.param.length === 0) {
                    return false;
                }

                len = response.param.length;

                jsonStr = "{'value':[";
                for (i = 0; i < len; i++) {
                    data.value.push({
                        word: response.param[i]
                    });
                }
                return data;
            }
        }).on('onDataRequestSuccess', function (e, result) {
            console.log('onDataRequestSuccess: ', result);
        }).on('onSetSelectValue', function (e, keyword) {
            console.log('onSetSelectValue: ', keyword);
        }).on('onUnsetSelectValue', function (e) {
            console.log('onUnsetSelectValue');
        });

        $('#suggest-demo-2').bsSuggest({
            url: ctx + 'public/demo/autocomplete/user',
            showBtn: false,
            idField: 'userId',
            keyField: 'loginName',
            processData: function (response) {
                var i, len, data = {
                    value: []
                };
                if (!response || !response.param || response.param.length === 0) {
                    return false;
                }

                len = response.param.length;

                jsonStr = "{'value':[";
                for (i = 0; i < len; i++) {
                    data.value.push({
                        word: response.param[i]
                    });
                }
                return data;
            }
        }).on('onDataRequestSuccess', function (e, result) {
            console.log('onDataRequestSuccess: ', result);
        }).on('onSetSelectValue', function (e, keyword) {
            console.log('onSetSelectValue: ', keyword);
        }).on('onUnsetSelectValue', function (e) {
            console.log('onUnsetSelectValue');
        });

        $('#suggest-demo-3').bsSuggest({
            indexId: 1,
            indexKey: 2,
            data: {
                'value': [
                    {
                        'userId': '100',
                        'loginName': '管理员',
                        'email' : 'admin@qq.com'
                    },
                    {
                        'userId': '101',
                        'loginName': '试用用户',
                        'email' : 'demo@qq.com'
                    },
                    {
                        'userId': '102',
                        'loginName': '普通用户',
                        'email': 'public@qq.com'
                    }
                ],
                'defaults': '默认值'
            }
        });

        // 百度搜索测试
        $('#baidu').bsSuggest({
            allowNoKeyword: false, //是否允许无关键字时请求数据
            multiWord: true,       //以分隔符号分割的多关键字支持
            separator: ',',        //多关键字支持时的分隔符，默认为空格
            getDataMethod: 'url',  //获取数据的方式，总是从 URL 获取
            url: 'http://unionsug.baidu.com/su?p=3&t=' + (new Date()).getTime() + '&wd=',
            jsonp: 'cb',            //跨域设置
            processData: function (json) {
                var i, len, data = {
                    value: []
                };
                if (!json || !json.s || json.s.length === 0) {
                    return false;
                }

                len = json.s.length;

                jsonStr = "{'value':[";
                for (i = 0; i < len; i++) {
                    data.value.push({
                        word: json.s[i]
                    });
                }
                data.defaults = 'baidu';

                return data;
            }
        });

        // 淘宝搜索测试
        $('#taobao').bsSuggest({
            indexId: 2,              //data.value 的第几个数据，作为input输入框的内容
            indexKey: 1,             //data.value 的第几个数据，作为input输入框的内容
            allowNoKeyword: false,  //是否允许无关键字时请求数据
            multiWord: true,        //以分隔符号分割的多关键字支持
            separator: ',',         //多关键字支持时的分隔符，默认为空格
            getDataMethod: 'url',  //获取数据的方式，总是从 URL 获取
            effectiveFieldsAlias: {
                Id: '序号',
                Keyword: '关键字',
                Count: '数量'
            },
            showHeader: true,
            url: 'http://suggest.taobao.com/sug?code=utf-8&extras=1&q=',
            jsonp: 'callback',      //跨域设置
            processData: function (json) {
                var i, len, data = {
                    value: []
                };

                if (!json || !json.result || json.result.length == 0) {
                    return false;
                }

                len = json.result.length;

                for (i = 0; i < len; i++) {
                    data.value.push({
                        'Id': (i + 1),
                        'Keyword': json.result[i][0],
                        'Count': json.result[i][1]
                    });
                }

                return data;
            }
        });

        $('#typeahead-demo-1').typeahead({
            source: ['piece 1', 'piece 2', 'piece 3']
        });

        $('#typeahead-demo-2').typeahead({
            source: [
                {'name': 'Afghanistan', 'code': 'AF', 'ccn0': '040'},
                {'name': 'Land Islands', 'code': 'AX', 'ccn0': '050'},
                {'name': 'Albania', 'code': 'AL', 'ccn0': '060'},
                {'name': 'Algeria', 'code': 'DZ', 'ccn0': '070'}
            ]
        });

        $.get(ctx + 'public/demo/typeahead/user', function (data) {
            $('#typeahead-demo-3').typeahead({
                source: data.param
            });
        }, 'json');
    });
</script>
</body>
</html>
